<template>
  <div>
    <el-row>
      <el-col :span="4">
        <div class="road-left">
          <div class="road-list" :class="activeTab==index?'active':''" v-for="(item,index) in typePagelist" :key="index" @click="bindChangeTab(index)">
            {{item.label}}
          </div>
        </div>
      </el-col>
      <el-col :span="20">
        <div class="road-right">
          <div class="road-flex">
            <div class="road-title" id="target0">通行费排行</div>
            <div class="time-select">
              <div class="time-item" :class="searchParams.feeTime==index?'active':''" v-for="(item,index) in timeList" :key="index"
                @click="bindChangeTime(index,'fee')">
                {{item.label}}</div>
            </div>
          </div>
          <div class="road-type">
            类型
            <div class="road-tag" :class="searchParams.feeTag==item.value?'active':''" v-for="(item,index) in typeFeeList" :key="index"
              @click="bindChangeTag(item.value,'fee')">
              {{item.label}}
            </div>
          </div>
          <div class="echarts margin-bottom ">
            <barEchert v-if="echartsData.xaxis?.length" :echartsData="echartsData" id="bar1" />
          </div>

          <div id="target1">
            <div class="road-flex">
              <div class="road-title">车流量排行</div>
              <div class="time-select">
                <div class="time-item" :class="searchParams.carTime==index?'active':''" v-for="(item,index) in timeList" :key="index"
                  @click="bindChangeTime(index,'car')">
                  {{item.label}}</div>
              </div>
            </div>
            <div class="road-type">
              类型

              <div class="flex-between ">
                <div class="flex ">
                  <div class="road-tag" :class="searchParams.carTag==item.value?'active':''" v-for="(item,index) in typeFeeList2" :key="index"
                    @click="bindChangeTag(item.value,'car')">
                    {{item.label}}
                  </div>
                </div>
                <div class="flex ">
                  <div class="road-tag" :class="searchParams.carType==item.value?'active':''" v-for="(item,index) in typeFeeList3" :key="index"
                    @click="bindChangeTag(item.value,'car',1)">
                    {{item.label}}
                  </div>
                </div>
              </div>
            </div>
            <div class="echarts">
              <barEchert v-if="echartsData2.xaxis?.length" :echartsData="echartsData2" id="bar2" />
            </div>

          </div>
          <div id="target2">
            <div class="road-flex">
              <div class="road-title">收费站车型排行</div>
              <div class="time-select">
                <div class="time-item" :class="searchParams.vehicleTime==index?'active':''" v-for="(item,index) in timeList" :key="index"
                  @click="bindChangeTime(index,'vehicle')">
                  {{item.label}}</div>
              </div>
            </div>
            <div class="road-type">
              类型
              <div class="flex-between ">
                <el-select v-model="searchParams.vehicleCar" size="small" placeholder="客车" style="margin-left: 10px;" @change="bindChangeTag($event,'vehicle')">
                  <el-option v-for="(item,index) in car_type.map(item=>item.label)" :key="index" :label="item" :value="index" />
                </el-select>
                <div class="flex ">
                  <div class="road-tag" :class="searchParams.vehicleTag==item.value?'active':''" v-for="(item,index) in typeFeeList3" :key="index"
                    @click="bindChangeVehicleCar(item.value)">
                    {{item.label}}
                  </div>
                </div>
              </div>

            </div>
            <div class="echarts margin-bottom ">
              <barEchert v-if="echartsData4.xaxis?.length" :echartsData="echartsData4" id="bar99" />
            </div>

          </div>
          <div id="target3">
            <div class="road-flex">
              <div class="road-title">通行费量日均排行</div>
              <div class="time-select">
                <div class="time-item" :class="searchParams.averageTime==index?'active':''" v-for="(item,index) in timeList" :key="index"
                  @click="bindChangeTime(index,'average')">
                  {{item.label}}</div>
              </div>
            </div>
            <div class="road-type">
              类型
              <div class="road-tag" :class="searchParams.averageTag==item.value?'active':''" v-for="(item,index) in typedayList" :key="index"
                @click="bindChangeTag(item.value,'average')">
                {{item.label}}
              </div>
            </div>
            <div class="echarts margin-bottom ">
              <barEchert v-if="echartsData3.xaxis?.length" :echartsData="echartsData3" id="bar5" />
            </div>

          </div>

          <div id="target4">
            <div class="road-flex">
              <div class="road-title">收费站客单价排行</div>
              <div class="time-select">
                <div class="time-item" :class="searchParams.customerTime==index?'active':''" v-for="(item,index) in timeList" :key="index"
                  @click="bindChangeTime(index,'customer')">
                  {{item.label}}</div>
              </div>
            </div>
            <div class="margin-top margin-bottom ">
              <!-- <table></table> -->
              <el-table :data="tableData" style="width: 100%" show-overflow-tooltip>
                <el-table-column prop="deptName" label="收费站" />
                <el-table-column prop="avgPrice" label="平均客单价(元)" sortable />
                <el-table-column prop="kAvgPrice" label="客车平均单价(元)" sortable />
                <el-table-column prop="hAvgPrice" label="货车平均单价(元)" sortable />
              </el-table>
            </div>

          </div>

          <div id="target5">
            <div class="road-flex">
              <div class="road-title">路段ETC使用情况</div>
              <div class="time-select">
                <div class="time-item" :class="searchParams.etcTime==index?'active':''" v-for="(item,index) in timeList" :key="index"
                  @click="bindChangeTime(index,'etc')">
                  {{item.label}}</div>
              </div>
            </div>
            <div class="margin-top margin-bottom">
              <!-- <table></table> -->
              <el-table :data="tableData2" style="width: 100%">
                <el-table-column prop="deptName" label="路段" />
                <el-table-column prop="totalFee" label="通行费" sortable />
                <el-table-column prop="totalEn" label="入口通行量" sortable />
                <el-table-column prop="totalEx" label="出口通行量" sortable />
                <el-table-column prop="enEtcRatio" label="入口ETC使用率" sortable />
                <el-table-column prop="exEtcRatio" label="出口ETC使用率" sortable />
              </el-table>
            </div>

          </div>

          <el-row gutter="10">
            <el-col :span="8" id="target6" class="border-right">
              <div class="road-flex">
                <div class="road-title">支付类型占比</div>
                <div class="time-select">
                  <div class="time-item" :class="searchParams.payTime==index?'active':''" v-for="(item,index) in timeList" :key="index"
                    @click="bindChangeTime(index,'pay')">
                    {{item.label}}</div>
                </div>
              </div>

              <div class="">
                <rankEchart v-if="rankData.xaxis?.length" :echartsData="rankData" id="rankData1" />
              </div>

            </el-col>
            <el-col :span="8" id="target7" class="border-right">
              <div class="road-flex">
                <div class="road-title">通行费客货占比</div>
                <div class="time-select">
                  <div class="time-item" :class="searchParams.tollTime==index?'active':''" v-for="(item,index) in timeList" :key="index"
                    @click="bindChangeTime(index,'toll')">
                    {{item.label}}</div>
                </div>
              </div>

              <div class="">
                <rankEchart v-if="rankData2.xaxis?.length" :echartsData="rankData2" id="rankData2" />
              </div>

            </el-col>
            <el-col :span="8" id="target8">

              <div class="road-flex">
                <div class="road-title">通行量客货占比</div>
                <div class="time-select">
                  <div class="time-item" :class="searchParams.transitTime==index?'active':''" v-for="(item,index) in timeList" :key="index"
                    @click="bindChangeTime(index,'transit')">
                    {{item.label}}</div>
                </div>
              </div>
              <div class="flex flex-between">
                <div></div>
                <div class="flex ">
                <div class="road-tag" :class="searchParams.transitType==item.value?'active':''" v-for="(item,index) in typeFeeList3" :key="index"
                  @click="bindChangeTag(item.value,'transit',1)">
                  {{item.label}}
                </div>
              </div>
              </div>
          

              <div class="">
                <rankEchart v-if="rankData3.xaxis?.length" :echartsData="rankData3" id="rankData3" />
              </div>

            </el-col>
          </el-row>

        </div>

      </el-col>
    </el-row>
  </div>
</template>
  
  <script setup>  
import { etcRatio, feeRanking, numRanking, payType, feeRate, numRate, avgPrice, vehicleRanking, dayRanking } from "@/api/charge/ticket";
import BarEchert from "./components/barEchert.vue";
import rankEchart from "./components/rankEchart.vue";
import moment from 'moment'
const { proxy } = getCurrentInstance();
const { car_type } = proxy.useDict('car_type');
const typePagelist = ref([{ label: "通行费排行", value: 0 }, { label: "车流量排行", value: 0 }, { label: "收费站车型排行", value: 0 },
{ label: "通行量费日均排行", value: 0 }, { label: "收费站客单价排行", value: 0 }, { label: "路段ETC使用情况", value: 0 },
{ label: "支付类型占比", value: 0 }, { label: "通行费客货占比", value: 0 }, { label: "通行量客货占比", value: 0 }])
const typeFeeList = ref([{ label: '全部', value: "totalFee" }, { label: 'ETC', value: "etcFee" }, { label: '其他', value: "otherFee" }])
const typeFeeList2 = ref([{ label: '全部', value: "total" }, { label: 'ETC', value: "etc" }, { label: '其他', value: "other" }])
const typeFeeList3 = ref([{ label: '出口', value: "ex" }, { label: '入口', value: "en" },])
const typedayList = ref([{ label: "按通行费排行", value: "dayFee" }, { label: "按通行量排行", value: "dayEx" }])
const timeList = ref([{ label: "昨天", value: 0, startDate: '', endDate: "" }, { label: "本月", value: 1, startDate: '', endDate: "" }, { label: "本季", value: 2, startDate: '', endDate: "" }, { label: "本年", value: 3, startDate: '', endDate: "" }])
const echartsData = ref({ xaxis: [], name: "通行费", series: [{ name: "通行费", data: [] }] })
const echartsData2 = ref({ unit: "辆", xaxis: [], name: "车流量", series: [{ name: "车流量", data: [] }] })
const echartsData3 = ref({ xaxis: [], series: [{ name: "通行费", data: [] }, { name: '通行量', data: [] }] })
const echartsData4 = ref({ unit: "辆", xaxis: [], name: "车流量", series: [{ name: "车流量", data: [] }] })
const rankData = ref({ xaxis: [], name: "通行费", series: [{ name: '现金', data: [] }, { name: 'ETC', data: [] }, { name: '非现金', data: [] }] })
const rankData2 = ref({ xaxis: [], name: "通行费", series: [{ name: '客车', data: [] }, { name: '货车', data: [] }] })
const rankData3 = ref({ xaxis: [], name: "通行费", series: [{ name: '客车', data: [] }, { name: '货车', data: [] }] })
const tableData = ref([])
const tableData2 = ref([])
const echartsEmpty = ref([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0])
const carType = ref([])



const activeTab = ref(0)

const data = reactive({
  form: {},
  //  moment().subtract(1, 'day')
  queryParams: {
    startDate: moment().subtract(1, 'day').format("YYYY-MM-DD"),
    endDate: moment().subtract(1, 'day').format("YYYY-MM-DD"),
  },
  searchParams: {
    feeTag: "totalFee",
    feeTime: 0,
    carTag: "total",
    carTime: 0,
    carType: "ex",
    vehicleTag: "ex",
    vehicleTime: 0,
    header: '',
    vehicleCar: 0,
    averageTag: 'dayFee',
    averageTime: 0,
    customerTime: 0,
    etcTime: 0,
    payTime: 0,
    tollTime: 0,
    transitTime: 0,
    transitType: 'ex',

  },

});

const { queryParams, searchParams, form } = toRefs(data);



const bindChangeTab = (index) => {
  activeTab.value = index;
  document.getElementById("target" + index).scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
}
const bindChangeTime = (value, name) => {
  searchParams.value[name + 'Time'] = value;
  // queryParams.value.startDate = timeList.value[value].startDate;
  // queryParams.value.endDate = timeList.value[value].endDate;



  getList(name)

}
// kEx客车出
//  hEx货车出
//  kEn客车入
//  hEn 货车入
// greenEx绿通车
const bindChangeTag = (val, name, type) => {
  if (name == 'vehicle') {
    searchParams.value.header = car_type.value[val].value.indexOf('-') != -1 ? '' : car_type.value[val].value;
    searchParams.value.vehicleCar = val;
    if (car_type.value[val].label.indexOf('绿通') != -1) {
      typeFeeList3.value = [{ label: '出口', value: "ex" }]
      searchParams.value.vehicleTag = "ex";
      searchParams.value.sort = 'greenEx'
    } else {
      typeFeeList3.value = [{ label: '出口', value: "ex" }, { label: '入口', value: "en" }]
      searchParams.value.vehicleTag = "ex";
      if (car_type.value[val].label.indexOf('客车') != -1) {
        searchParams.value.sort = 'kEx'
      } else {
        searchParams.value.sort = 'hEx'
      }
    }

    getList(name)
  } else if (name == 'car') {
  
    if (type == 1) {
      searchParams.value[name + 'Type'] = val;
    } else {
      searchParams.value[name + 'Tag'] = val;
    }
    getList(name)
  } else if (name == 'transit') {
   
    if (type == 1) {
      searchParams.value[name + 'Type'] = val;
    } else {
      searchParams.value[name + 'Tag'] = val;
    }
    getList(name)
  } else {

    searchParams.value[name + 'Tag'] = val;
    getList(name)
  }

}

const bindChangeVehicleCar = (val) => {
  let name = car_type.value[searchParams.value.vehicleCar].label
  searchParams.value.vehicleTag = val;

  if (name.indexOf('客车') != -1) {
    typeFeeList3.value = [{ label: '出口', value: "ex" }, { label: '入口', value: "en" }]
    searchParams.value.sort = val == 'ex' ? 'kEx' : 'kEn'
  } else if (name.indexOf('货车') != -1) {
    typeFeeList3.value = [{ label: '出口', value: "ex" }, { label: '入口', value: "en" }]
    searchParams.value.sort = val == 'ex' ? 'hEx' : 'hEn'
  } else {
    typeFeeList3.value = [{ label: '出口', value: "ex" }]
    searchParams.value.vehicleTag = "ex";
    searchParams.value.sort = 'greenEx'
  }
  getList('vehicle')
}
const getList = (name) => {
  let obj = {}
  obj.startDate = timeList.value[searchParams.value[name + "Time"]].startDate;
  obj.endDate = timeList.value[searchParams.value[name + "Time"]].endDate;
  obj.sort = searchParams.value[name + "Tag"]



  if (name == 'fee') {
    getfeeRanking(obj)
  } else if (name == 'car') {
    obj.sort = (searchParams.value[name + 'Tag'] ? searchParams.value[name + 'Tag'] : 'total') + capitalizeFirstLetter(searchParams.value[name + 'Type'] ? searchParams.value[name + 'Type'] : 'ex')
    getnumRanking(obj)
  } else if (name == 'vehicle') {
    obj.sort = searchParams.value.sort;
    obj.header = searchParams.value.header;
    getVehicleRanking(obj)

  } else if (name == 'average') {
    getDayRanking(obj)
  } else if (name == 'customer') {
    getAvgPrice(obj)

  } else if (name == 'etc') {
    getEtcRatio(obj)
  } else if (name == 'pay') {
    getRankPay(obj)
  } else if (name == 'toll') {
    getfeeRate(obj)
  } else if (name == 'transit') {
    getnumRate(obj)
  }

}

const getTimeStart = () => {
  let date = new Date();
  let year = date.getFullYear();
  timeList.value.forEach((element, val) => {
    if (val == 0) {
      timeList.value[0].startDate = moment().subtract(1, 'day').format("YYYY-MM-DD")
      timeList.value[0].endDate = moment().subtract(1, 'day').format("YYYY-MM-DD");
    } else if (val == 1) {
      timeList.value[1].startDate = moment().startOf('month').format('YYYY-MM-DD');
      timeList.value[1].endDate = moment().endOf('month').format('YYYY-MM-DD')
    } else if (val == 2) {
      let startQuarter = moment(moment().quarter(moment().quarter()).startOf('quarter').valueOf()).format('YYYY-MM-DD');
      let endQuarter = moment(moment().quarter(moment().quarter()).endOf('quarter').valueOf()).format('YYYY-MM-DD');
      timeList.value[2].startDate = startQuarter
      timeList.value[2].endDate = endQuarter
    } else {
      timeList.value[3].startDate = year + '-01-01'
      timeList.value[3].endDate = year + '-12-31'
    }
  });



}

function getfeeRanking(obj) {
  let data = obj ? obj : { ...queryParams.value, ...{ sort: 'totalFee' } }
  echartsData.value.xaxis = []
  feeRanking(data).then(response => {

    if (response.code == 200 && response.data) {
      echartsData.value.xaxis = response.data.deptName;
      echartsData.value.series[0].data = response.data[data.sort] ? response.data[data.sort] : echartsEmpty


    }


  });
}
function getRankPay(obj) {
  let data = obj ? obj : { ...queryParams.value, ...{ sort: 'totalFee' } }
  rankData.value.xaxis = []
  payType(data).then(response => {
    rankData.value.xaxis = response.data.deptName;
    rankData.value.series[0].data = response.data.cashPay;
    rankData.value.series[1].data = response.data.etcPay;
    rankData.value.series[2].data = response.data.nonCashPay

  });
}
function getfeeRate(obj) {
  let data = obj ? obj : { ...queryParams.value, ...{ sort: 'totalFee' } }
  rankData2.value.xaxis = []
  feeRate(data).then(response => {
    rankData2.value.xaxis = response.data.deptName;
    rankData2.value.series[0].data = response.data.kFeeRate;
    rankData2.value.series[1].data = response.data.hFeeRate;


  });
}

function getnumRate(obj) {
  let data = obj ? obj : { ...queryParams.value, ...{ sort: 'totalFee' } }
  rankData3.value.xaxis = []
  numRate(data).then(response => {
    rankData3.value.xaxis = response.data.deptName;
    rankData3.value.series[0].data = response.data[ searchParams.value.transitType=='ex'?'hExRate':'hEnRate'];
    rankData3.value.series[1].data = response.data[ searchParams.value.transitType=='ex'?'kExRate':'kEnRate'];

  });
}
function getnumRanking(obj) {
  echartsData2.value.xaxis = []
  let data = obj ? obj : { ...queryParams.value, ...{ sort: 'totalEx' } }
  numRanking(data).then(response => {
    if (response.code == 200 && response.data) {
      echartsData2.value.xaxis = response.data.deptName;
      echartsData2.value.series[0].data = response.data[data.sort] ? response.data[data.sort] : echartsEmpty;
    }
  });
}
function getVehicleRanking(obj) {
  echartsData4.value.xaxis = []
  let data = obj ? obj : { ...queryParams.value, ...{ sort: 'kEx' } }
  vehicleRanking(data).then(response => {
    if (response.code == 200 && response.data) {
      echartsData4.value.xaxis = response.data.deptName;
      echartsData4.value.series[0].data = response.data[data.sort] ? response.data[data.sort] : echartsEmpty;


    }
  });
}
function getDayRanking(obj) {
  echartsData3.value.xaxis = []
  let data = obj ? obj : { ...queryParams.value, ...{ sort: 'dayFee' } }
  dayRanking(data).then(response => {
    if (response.code == 200 && response.data) {
      echartsData3.value.xaxis = response.data.deptName;
      echartsData3.value.series[0].data = response.data.dayFee ? response.data.dayFee : echartsEmpty;
      echartsData3.value.series[1].data = response.data.dayEx ? response.data.dayEx : echartsEmpty;
    }
  });
}


function getAvgPrice(obj) {
  tableData.value = []
  let data = obj ? obj : { ...queryParams.value, ...{ sort: 'dayFee' } }
  avgPrice(data).then(response => {
    if (response.code == 200 && response.data) {
      tableData.value = response.data;
    }
  });
}


function getEtcRatio(obj) {
  tableData2.value = []
  let data = obj ? obj : { ...queryParams.value, ...{ sort: 'dayFee' } }
  etcRatio(data).then(response => {
    if (response.code == 200 && response.data) {
      tableData2.value = response.data;
    }
  });
}
function capitalizeFirstLetter(string) {
  return string.toLowerCase().replace(/\b[a-z]/g, function (match) {
    return match.toUpperCase();
  });
}





const init = () => {
  getTimeStart()
  getfeeRanking()
  getRankPay()
  getnumRanking()
  getVehicleRanking()//收费站车型排行
  getDayRanking() //通行费量日均排行
  getAvgPrice()//收费站客单价排行
  getfeeRate()
  getnumRate()
  getEtcRatio()//ETC使用
}
init()

  </script>
  
  <style scoped>
.road-left {
  height: calc(100vh - 85px);
  padding: 30px;
  border-right: 1px solid #d8d8d8;
}
.road-list {
  line-height: 50px;
  font-size: 14px;
  color: #111;
  position: relative;
  padding-left: 20px;
  cursor: pointer;
}
.road-list.active {
  color: #2f7ef5;
}
.road-list.active::before {
  content: "";
  display: block;
  width: 2px;
  height: 16px;
  background: #2f7ef5;
  position: absolute;
  left: 0;
  top: 17px;
}
.road-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.road-title {
  width: 282px;
  line-height: 40px;
  background: url(../../../assets/images/icon63.png) no-repeat 0 0;
  background-size: 100% 100%;
  font-weight: 700;
  font-size: 16px;
  color: #222222;
  padding-left: 8px;
}
.time-select {
  width: 250px;
  line-height: 40px;
  background: #f2f3f8;
  color: #4e5969;
  font-size: 14px;
  border: 1px solid #f2f3f8;
  display: flex;
  flex-shrink: 0;
  cursor: pointer;
}
.time-item {
  flex: 1;
  text-align: center;
  cursor: pointer;
}
.time-item.active {
  background: #fff;
  color: #1664ff;
}
.road-right {
  height: calc(100vh - 85px);
  padding: 20px;
  overflow-y: scroll;
}
.road-type {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.road-tag {
  margin-left: 10px;
  font-size: 14px;
  padding: 0 14px;
  line-height: 28px;
  border: 1px solid #d2d2d2;
  color: #999999;
  border-radius: 6px;
}
.road-tag.active {
  background: #2f7ef5;
  color: #fff;
  border: 1px solid #2f7ef5;
}
.margin-top {
  margin-top: 10px;
}
.flex {
  display: flex;
  align-items: center;
}
.flex-between {
  flex: 1;
  display: flex;
  justify-content: space-between;
}
.margin-bottom {
  margin-bottom: 40px;
}
.border-right{
  border-right:1px solid #f2f3f8 ;
}
</style>